<template>
  <div>
    <!-- <div class="toptitle">总部价格编码</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row :span=24>
            <el-col :span=8>
      <el-form-item label="国际码">
        <el-input v-model="formInline.region"  size="mini" placeholder clearable></el-input>
      </el-form-item>
            </el-col>
                <el-col :span=8>
      <el-form-item label="商品名称">
        <el-input v-model="formInline.user"  size="mini" placeholder clearable></el-input>
      </el-form-item>
                </el-col>
                    <el-col :span=8>
      <el-form-item label="商品分类：">
        <el-select v-model="formInline.goodsTypeId"  size="mini" clearable>
          <el-option
            v-for="(send, i) in typeData"
            :key="i"
            :value="send.goodsTypeId"
            :label="send.goodsTypeName"
          ></el-option>
        </el-select>
      </el-form-item>
      </el-col>
      </el-row>
      <el-row :span=24>
          <el-col :span=8><el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item></el-col>
           <el-col :span=8><el-form-item></el-form-item></el-col>
            <el-col :span=8>
      </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" border style="width: 100%;margin-bottom: 20px;" v-loading="loading">
      <el-table-column type="index" label="序号" align="center" :index="indexMethod" width="60" ></el-table-column>
      <el-table-column prop="goodsTypeName" label="分类名称" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="barCode" label="国际条码" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unitName" label="计量单位" align="left"></el-table-column>
      <el-table-column prop="saleLowerPrice" label="总部底价（元）" align="center" :formatter="fixData">
        <template slot-scope="scope">
          <el-input
            :maxlength="8"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model="scope.row.saleLowerPrice"
            style="width:120px;text-align-last:right"
            @change="data=>{scope.row.saleLowerPrice=toPrice(data),edit(scope.row)}"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="salePrice" label="总部标准价（元）" align="center">
        <template slot-scope="scope" align="right">
          <el-input
            :maxlength="8"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model="scope.row.salePrice"
            style="width:120px;text-align-last:right"
            @change="data=>{scope.row.salePrice=toPrice(data),getChangeData(scope.row)}"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="saleUpperPrice" label="总部上限价（元）" align="center" v-if="false">
        <template slot-scope="scope">
          <el-input
            :maxlength="8"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model="scope.row.saleUpperPrice"
            style="width:120px;text-align-last:right"
            @change="data=>{scope.row.saleUpperPrice=toPrice(data),getChangeData(scope.row)}"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 0px;"></el-form-item>
    </el-form>
    <div class="block" style="margin-top:-22px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryGoodsPriceList,
  addGoodsPrice,
  updateGoodsPrice,
  deletGoodsPrice,
  updaterole
} from "@/api/headPricemanage";
import { queryGoodsCategorys } from "@/api/warProductmanage";
import qs from "qs";
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      dialogVisibleorg: false,
      dialogVisibleorgone: false,
      typeData: [],
      ruleForm: {
        goodsTypeId: "",
        goodsTypeName: "",
        status: "",
        isDisplay: "",
        displayForm: "",
        goodsTypeId: "",
        upGoodsType: ""
      },
      orgSeqxia: "",
      ruleFormorg: {
        goodsTypeId: "",
        goodsTypeName: "",
        status: "",
        isDisplay: "",
        displayForm: "",
        goodsTypeId: "",
        upGoodsType: ""
      },
      total: 0,
      options: [],
      optionsone: [],
      listQuery: {
        current: 1,
        size: 10
      },
      flagorg: false,
      dialogVisible: false,
      formInline: {
        user: "",
        region: "",
        goodsTypeId: ""
      },
      rules: {}
    };
  },
  mounted() {
    this.rolemanageone();
    this.getProductType();
  },
  methods: {
    //获取商品分类列表
    getProductType(v) {
      let data = {};
      queryGoodsCategorys(data).then(res => {
        this.typeData = res.records;
      });
    },
    creatoneOrg() {
      this.dialogVisibleorg = !this.dialogVisibleorg;
    },
    creatoneOrgone(v) {
      console.log(v, "ll");
      this.flagorg = true;
      this.orgSeqxia = v.goodsTypeId;
      this.dialogVisibleorgone = !this.dialogVisibleorgone;
    },
    confirmEditone() {
      let data = {
        goodsTypeName: this.ruleForm.goodsTypeName,
        status: this.ruleForm.status,
        isDisplay: this.ruleForm.isDisplay,
        displayForm: this.ruleForm.displayForm,
        goodsTypeId: this.ruleForm.goodsTypeId,
        upGoodsType: this.ruleForm.upGoodsType
      };
      addGoodsPrice(data).then(res => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
        });
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.rolemanageone();
      });
    },
    confirmEdittwo() {
      if (this.flagorg == false) {
        let dataone = {
          goodsTypeName: this.ruleFormorg.goodsTypeName,
          status: this.ruleFormorg.status,
          isDisplay: this.ruleFormorg.isDisplay,
          displayForm: this.ruleFormorg.displayForm,
          goodsTypeId: this.ruleFormorg.goodsTypeId
        };
        addGoodsPrice(dataone).then(res => {
          this.dialogVisibleorgone = !this.dialogVisibleorgone;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.rolemanageone();
        });
      } else if (this.flagorg == true) {
        let data = {
          goodsTypeName: this.ruleFormorg.goodsTypeName,
          status: this.ruleFormorg.status,
          isDisplay: this.ruleFormorg.isDisplay,
          displayForm: this.ruleFormorg.displayForm,
          goodsTypeId: this.ruleFormorg.goodsTypeId,
          upGoodsType: this.orgSeqxia
        };
        addGoodsPrice(data).then(res => {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.dialogVisibleorgone = !this.dialogVisibleorgone;
          this.rolemanageone();
        });
      }
    },
    changeorg(v) {
      this.dialogVisibleorgone = !this.dialogVisibleorgone;
      var userId = localStorage.getItem("userId");
      this.ruleFormorg.goodsTypeName = v.goodsTypeName;
      this.ruleFormorg.goodsTypeId = v.goodsTypeId;
      (this.ruleFormorg.status = v.status),
        (this.ruleFormorg.isDisplay = v.isDisplay),
        (this.ruleFormorg.displayForm = v.displayForm),
        (this.ruleFormorg.upGoodsType = v.upGoodsType),
        (this.flagorg = false);
    },
    kong() {
      this.formInline.user = "";
      this.formInline.region = "";
      this.formInline.goodsTypeId = "";
    },
    search() {
      //   let data = {
      //     roleName: this.formInline.user,
      //     roleType: this.formInline.region
      //   };
      let data = {
        size: this.listQuery.size,
        current: 1,
        condition: {
          goodsName: this.formInline.user,
          barCode: this.formInline.region,
          goodsTypeId: this.formInline.goodsTypeId
        }
      };
      //  };
      queryGoodsPriceList(data).then(res => {
        res.records.forEach((item, i) => {
          item.saleLowerPrice = this.toPrice(item.saleLowerPrice);
          item.salePrice = this.toPrice(item.salePrice);
          item.saleUpperPrice = this.toPrice(item.saleUpperPrice);
        });
        this.tableData = res.records;
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    handledelete(v) {
      console.log(v, "pp");
      let data = {
        priceId: v.priceId
      };
      this.$confirm("确认删除吗？").then(_ => {
        deletGoodsPrice(qs.stringify(data)).then(res => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.rolemanageone();
        });
      });
      console.log(v, "pppp");
    },
    add() {
      let data = {
        goodsId: v.goodsId,
        saleLowerPrice: v.saleLowerPrice,
        salePrice: v.salePrice,
        saleUpperPrice: v.saleUpperPrice
      };
      updateGoodsPrice(data).then(res => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
        });
        this.rolemanageone();
      });
    },
    getChangeData(v) {
      if (v.salePrice < v.saleLowerPrice) {
        this.$message({
          showClose: true,
          message: "总部标准价不能低于总部底价",
          type: "info"
        });
        this.rolemanageone();
        return false;
      }
      this.edit(v);
    },
    toPrice(val, type) {
      // 值，符号
      if (val === null || val === undefined || val === "") {
        return "0.00";
      } else {
        var data = Number(val)
          .toFixed(2)
          .split(".");
        var data2 = data[0]
          .split("")
          .reverse()
          .join("");
        var newData = data2;
        // if (parseInt((data2.length - 1) / 3) >= 0) {
        //   var count = 0;
        //   do {
        //     newData = newData + data2.slice(count * 3, count * 3 + 3) + '';

        //     count = count + 1;
        //   } while (parseInt((data2.length - 1) / 3) >= count);
        // }
        if (type) {
          return (
            type +
            newData
              .split("")
              .reverse()
              .join("")
              .slice(1) +
            "." +
            data[1]
          );
        } else {
          return (
            newData
              .split("")
              .reverse()
              .join("")
              .slice(0) +
            "." +
            data[1]
          );
        }
      }
    },
    edit(v) {
      let data = {
        priceId: v.priceId,
        goodsId: v.goodsId,
        saleLowerPrice: v.saleLowerPrice,
        salePrice: v.salePrice,
        saleUpperPrice: v.saleUpperPrice
      };
      updateGoodsPrice(data).then(res => {
        // this.$message({
        //   showClose: true,
        //   message: "修改成功",
        //   type: "success"
        // });
        // this.rolemanageone();
      });
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (this.ruleForm.goodsName == "" || this.ruleForm.goodsName == null) {
        this.$message.error("请输入本级价格名称");
        return;
      }
      if (
        this.ruleForm.goodsTypeId == "" ||
        this.ruleForm.goodsTypeId == null
      ) {
        this.$message.error("请输入本级价格编码");
        return;
      }
      if (this.ruleForm.upOrgSeq == "" || this.ruleForm.upOrgSeq == null) {
        this.$message.error("请选择上级价格名称");
        return;
      }
      if (this.ruleForm.orgType == "" || this.ruleForm.orgType == null) {
        this.$message.error("请选择价格类型");
        return;
      }
      if (this.editflag) {
        //   var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          goodsName: this.ruleForm.goodsName,
          goodsTypeId: this.ruleForm.goodsTypeId,
          upOrgSeq: this.ruleForm.upOrgSeq,
          upOrgSeqName: this.ruleForm.upOrgSeqName,
          orgType: this.ruleForm.orgType,
          updateUser: this.ruleForm.updateUser,
          status: "1"
        };
        addGoodsPrice(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.rolemanageone();
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          priceId: this.ruleForm.priceId,
          goodsId: this.ruleForm.goodsId,
          saleLowerPrice: this.ruleForm.saleLowerPrice,
          salePrice: this.ruleForm.salePrice,
          movePrice: this.ruleForm.movePrice
        };
        updateGoodsPrice(data).then(res => {
          // this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.rolemanageone();
        });
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.rolemanageone();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.rolemanageone();
    },
    handleClick(v) {
      if (v.status === 0) {
        var uuid = 1;
      } else if (v.status === 1) {
        var uuid = 0;
      }
      let data = { roleId: v.roleId, status: uuid };
      usebutton(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.rolemanageone();
      });
    },
    rolemanageone() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          goodsName: this.formInline.user,
          barCode: this.formInline.region,
          goodsTypeId: this.formInline.goodsTypeId
        }
      };
      queryGoodsPriceList(data).then(res => {
        res.records.forEach((item, i) => {
          item.saleLowerPrice = this.toPrice(item.saleLowerPrice);
          item.salePrice = this.toPrice(item.salePrice);
          item.saleUpperPrice = this.toPrice(item.saleUpperPrice);
        });

        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        return cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    }
  }
};
</script>
<style  lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.el-form-item {
  margin-bottom: 0px;
}
.el-row {
  margin-bottom: 0px;
}
</style>
